<template>
  <el-tabs v-model="activeName" stretch type="card" v-if="showTab" @tab-click="placeDisable = true">
    <el-tab-pane label="值日生登记">
      <el-card>
        <el-switch v-model="isInComputer" active-color="#13ce66" active-text="计算机楼" inactive-color="#409EFF" inactive-text="电化教育楼" :disabled="placeDisable"/>
        <DeviceCheck_Login/>
      </el-card>
    </el-tab-pane>
    <el-tab-pane v-for="name of categories" :key="name" :label="name" lazy>
      <DeviceForm :category="name" :place="isInComputer ? '计算机楼' : '电化教育楼'"/>
    </el-tab-pane>
  </el-tabs>
  <p/>
  <el-button v-show="activeName==7" type="primary" round style="width:97%; height:45px" @click="submit" v-if="showTab">提交</el-button>
  <el-button v-show="activeName!=7" type="primary" round style="width:97%; height:45px" @click="nextPage" v-if="showTab">下一页</el-button>
  <h1 v-if="!showTab && submitSuccess">提交成功</h1>
  <div v-if="!showTab && !submitSuccess">
    <p>{{result}}</p>
    <p>{{msg}}</p>
  </div>
</template>

<script>
import DeviceCheck_Login from "@/components/DeviceCheck_Login"
import DeviceForm from '@/components/DeviceCheck_Form'
import axios from "axios";
import {ElNotification} from "element-plus";

const failureNotification = (msg = '请刷新页面重新提交，或将页面正文中信息复制发给社长') => {
  ElNotification({
    title: '提交失败',
    message: msg,
    type: 'error',
    duration: 0,
  })
}

export default {
  name: "DeviceCheck_Body",
  data() {
    return {
      placeDisable: false,
      activeName: '0',
      showTab: true,
      submitSuccess: false,
      msg: "",
      result: "",
      isInComputer: true,
      categories: ['相机类', '镜头类', '电池类', '存储类', '转接类', '常用配件类', '不常用配件类'],
    }
  },
  methods:{
    submit: function () {
      const place = this.isInComputer ? '计算机楼' : '电化教育楼'
      let finalData = {}
      let lastWeek = window.localStorage.lastWeek
      let thisWeek = window.localStorage.thisWeek
      let device = {}

      if(!lastWeek || !thisWeek) {
        failureNotification("请填写上周值日生与本周值日生")
        return
      }

      try{
        device = JSON.parse(window.localStorage[place])
      }catch (e) {
        failureNotification("出现错误，请暂时使用老交接方式")
        return
      }


      for(let classes in device){
        for (let name in device[classes]){
          finalData[name] = []
          for(let value_index in device[classes][name]){
            let temp = device[classes][name][value_index].substr(0, 2)
            finalData[name].push(parseInt(temp))
          }
        }
      }
      let url = "/api/checkDevice?lastWeek=" + lastWeek + "&thisWeek=" + thisWeek + "&place=" + (this.isInComputer ? "计算机楼" : "电化教育楼")
      axios.post(url, finalData).then(res => {
        if(res.status === 200 && res.data.toString().indexOf("提交成功") !== -1) {
          window.localStorage.removeItem(place)
          this.showTab = false
          this.submitSuccess = true
          this.$router.push('/result/已收到提交，辛苦啦~')
        }else {
          this.showTab = false
          this.msg = JSON.stringify(finalData)
          failureNotification()
          this.result = res.data
        }
      }).catch((error) => {
        if (error.response) {
          // 请求成功发出且服务器也响应了状态码，但状态代码超出了 2xx 的范围
          this.showTab = false
          this.msg = JSON.stringify(finalData)
          failureNotification()
          this.result = error.response.data
        } else if (error.request) {
          this.showTab = false
          this.msg = JSON.stringify(finalData)
          failureNotification()
          this.result = error.request
        } else {
          this.showTab = false
          this.msg = JSON.stringify(finalData)
          failureNotification()
          console.log('Error', error.message);
        }
      })
    },
    nextPage: function () {
      this.activeName = (parseInt(this.activeName) + 1).toString()
    }
  },
  components: {
    DeviceForm,
    DeviceCheck_Login
  }
}
</script>

<style scoped>
a {
  text-decoration: none;
}
</style>